<template>
    <view class="container" :style="themeColor">
        <view class="header">
            <view class="header-info">
                <image class="vip-icon" src="/static/img/vip_1.png"></image>
                <text class="text">Plus会员</text>
            </view>
            <text class="tip">购买plus可享受会员折上折，享受更优惠的价格</text>
            <view class="mark-bar"> </view>
        </view>
        <view class="main">
            <view class="card-list">
                <view class="card-list-item" @click="selectCard(item)"
                    :class="{ current: selectedCard && selectedCard.ID == item.ID }" v-for="(item, index) in cardList"
                    :key="index">
                    <image class="icon-vip" :src="getVipIcon(item.Type)"></image>
                    <text class="card-name">{{ item.Name }}</text>
                    <view class="price">
                        <text class="small">￥</text>
                        <text>{{ item.DisPrice }}</text>
                    </view>
                    <text class="del-text">￥{{ item.Price }}</text>
                </view>
            </view>
            <mescroll-empty :option="listEmpty" v-if="cardList.length < 1"></mescroll-empty>
        </view>
        <view class="pay-list-box" v-if="false">
            <view class="title-bar">
                <text>请选择支付方式</text>
            </view>
            <view class="value" v-if="userPay.PayName" @click="$refs.payWay.open()">
                <image class="pay-way-icon" :src="getIcon(userPay.PaymentPayWay)"></image>
                <text class="pay-way-text">{{ userPay.PayName }}</text>
                <uni-icons type="arrowright"></uni-icons>
            </view>
        </view>
        <view class="bottom-bar" v-if="selectedCard">
            <button class="btn btn-main btn-fill" @click="$refs.payWay.open()">
                <text>支付¥{{ selectedCard.DisPrice }}/{{ selectedCard.TypeName }}</text>
            </button>
        </view>
        <uni-popup v-if="selectedCard" type="bottom" ref="payWay" background-color="#fff" :safe-area="false">
            <pay-way :payPrice="String(selectedCard.DisPrice)" v-if="payList.length > 0" :payList="payList"
                @cancel="cancel" @select="select"></pay-way>
        </uni-popup>
    </view>
</template>

<script>
import { getList } from "@/service/api/businessPay.js"
import { GetAllVipCard, SubmitVipInfo, VipXianPay } from "@/service/api/member.js"
import { MiniProgramPay } from "@/service/api/open.js"
import payWay from "@/components/common/pay-way.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import config from "@/config/config.js"
import { payForWx, helPayFn } from "@/utils/orderUtil.js"
export default {
    components: {
        payWay,
    },
    data() {
        return {
            currentId: 0,
            cardList: [],
            payList: [],
            userPay: {},
            selectedCard: null,
        }
    },
    mounted() {
        this.getPayList()
        this.getAllVipCard()
    },
    onShow() { },
    methods: {
        //提交购买会员卡
        submitVipInfo(payItem) {
            let canPayWay =
                payItem.PaymentPayWay == 0 ||
                payItem.PaymentPayWay == 1 ||
                payItem.PaymentPayWay == 4 ||
                payItem.PaymentPayWay == 12
            if (!canPayWay) {
                this.easyToast("暂不支持该支付方式")
                return
            }
            //检查余额,余额是否够
            if (payItem.PaymentPayWay == 1 && (payItem.Balance <= 0 || payItem.Balance < this.selectedCard.DisPrice)) {
                this.easyToast("您的余额不足，请前往充值再提交订单")
                return
            }
            this.$refs.payWay.close()
            let param = {
                type: this.selectedCard.Type,
                paySource: payItem.PaymentPayWay,
            }
            uni.showLoading({
                title: "加载中",
            })

            SubmitVipInfo(param).then((res) => {
                if (res.State == 1 && res.Data) {
                    let orderData = res.Data
                    let data = orderData.Model
                    //埋点
                    let tackData = {
                        id: data.ID,
                        orderPrice: data.PayPrice,
                    }
                    this.tackSubmitOrder(tackData)
                    if (payItem.PaymentPayWay == 0) {
                        //线下支付
                        uni.hideLoading()
                        this.easyGoTo(
                            "/pages_me/packet/plus/waitPay?orderData=" + encodeURIComponent(JSON.stringify(orderData)),
                        )
                    } else if (payItem.PaymentPayWay == 1) {
                        //余额支付
                        let payParam = {
                            orderNo: data.OrderNo,
                            payWay: payItem.PaymentPayWay,
                        }
                        VipXianPay(payParam).then((payRes) => {
                            uni.hideLoading()
                            if (payRes.State == 1) {
                                this.easyReLaunch("/pages_me/packet/plus/result")
                            } else {
                                this.easyToast(payRes.Msg)
                            }
                        })
                    } else if (payItem.PaymentPayWay == 4) {
                        data.OutTradeNo = data.OrderNo
                        data.PayMoney = data.PayPrice
                        //微信小程序支付
                        payForWx(data, 1).then((res) => {
                            uni.hideLoading()
                            if (res) {
                                this.easyReLaunch("/pages_me/packet/plus/result")
                            } else {
                            }
                        })
                    } else if (payItem.PaymentPayWay == 12) {
                        //云支付
                        this.helPayOrder(data.ID)
                    }
                } else {
                    uni.hideLoading()
                    this.easyToast(res.Msg)
                }
            })
        },
        //获取会员卡列表
        getAllVipCard() {
            GetAllVipCard().then((res) => {
                if (res.State == 1 && res.Data) {
                    this.cardList = res.Data.List
                    this.selectedCard = res.Data.List[0]
                }
            })
        },
        //获取支付方式
        getPayList() {
            let param = {}
            getList(param).then((res) => {
                this.payList = res.Data
                this.userPay = this.payList[1]
            })
        },
        select(data) {
            this.userPay = data
            this.submitVipInfo(data)
        },
        payVipCallBack(data) {
            let param = {
                userId: 0,
                type: 1,
                payPrice: this.selectedCard.DisPrice,
                paySource: 1,
                addTime: "2021-09-02T06:48:45.854Z",
                businessId: 0,
                id: 0,
            }
            PayVipCallBack().then((res) => { })
        },
        helPayOrder(orderId) {
            helPayFn(this, orderId, 1).then((res) => {
                setTimeout(() => {
                    this.easyGoBack()
                }, 1000)
            })
        },
        getIcon(id) {
            switch (id) {
                case 0:
                    return "/static/img/offline_pay.png"
                    break
                case 1:
                    return "/static/img/bank/yepay.png"
                    break
                case 10:
                    return "/static/img/bank/bank.png"
                    break
            }
        },
        getVipIcon(type) {
            switch (type) {
                case 1:
                    return "/static/img/vip_3.png"
                    break
                case 3:
                    return "/static/img/vip_2.png"
                    break
                case 12:
                    return "/static/img/vip_1.png"
                    break
            }
        },
        selectCard(item) {
            this.selectedCard = item
        },
        cancel() {
            this.$refs.payWay.close()
        },
    },
}
</script>

<style lang="scss">
page {
    background: $color-white;
}

.header {
    height: 260rpx;
    background-color: #333230;
    background-image: url(../../static/img/plus_header_bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding-left: 40rpx;
    position: relative;

    .header-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-top: 50rpx;
        margin-bottom: 10rpx;

        .vip-icon {
            width: 72rpx;
            height: 72rpx;
            margin-right: 16rpx;
        }

        .text {
            color: #eed9a4;
            font-weight: 700;
            font-size: 44rpx;
        }
    }

    .tip {
        color: #eed9a4;
        font-weight: 700;
        font-size: $font-size-28;
    }

    .mark-bar {
        height: 42rpx;
        width: 100vw;
        background: $color-white;
        border-radius: 40rpx 40rpx 0 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }
}

.card-list {
    display: flex;
    flex-direction: row;
}

.card-list-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 1rpx #dbdbdb;
    border-radius: 24rpx;
    margin-left: 24rpx;
    height: 296rpx;

    &:last-child {
        margin-right: 24rpx;
    }

    .icon-vip {
        width: 56rpx;
        height: 56rpx;
        margin-bottom: 4rpx;
    }

    .price {
        margin: 16rpx 0;

        text {
            font-size: 56rpx;
            font-weight: 700;
        }

        .small {
            font-size: 28rpx;
        }
    }

    .del-text {
        color: $app-color-text-tip;
        font-size: $font-size-28;
    }

    .card-name {
        font-weight: 700;
        font-size: $font-size-28;
    }
}

.current {
    background: #fdf9f0;
    box-shadow: 0 4rpx 8rpx 0 rgba(192, 144, 44, 0.3);
    border: 4rpx solid #f3cd8d;

    .price {
        text {
            color: #6f4917;
        }
    }

    .card-name {
        color: #6f4917;
    }
}

.bottom-bar {
    .btn {
        margin-left: 0;
        height: 90rpx;
        border-radius: 100rpx;

        text {
            color: $color-white;
            font-size: 32rpx;
        }
    }
}

.pay-list-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: $app-page-padding;
    border: solid 1rpx #f9f9f9;
    margin-top: 56rpx;
    border-radius: 8rpx;

    .title-bar {
        height: 98rpx;
        background: #f9f9f9;
        display: flex;
        align-items: center;
        padding: 0 $app-page-padding;
        border: 8rpx 8rpx 0 0;

        text {
            font-size: $font-size-28;
        }
    }

    .value {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        padding: $app-page-padding;

        .pay-way-icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: $app-page-padding;
        }

        .pay-way-text {
            flex: 1;
            font-size: $font-size-32;
        }
    }
}
</style>
